<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: slategrey;
            /* float: left; */
        }
        
        .boxs {
            width: 50px;
            height: 50px;
            background-color: steelblue;
            /* float: left; */
            position: absolute;
            top: 0;
            left: 50px;
        }
        
        .boxsflex {
            width: 50px;
            height: 50px;
            background-color: steelblue;
            /* float: left; */
            position: absolute;
            top: 0;
            left: 50px;
            /* 溢出的部分隐藏 */
            /* overflow: hidden; */
            overflow: auto;
        }
        
        .father {
            position: relative;
        }
        /* 浮动 */
        
        .fatherflex {
            position: relative;
            /* position: fixed; */
        }
        
        .image {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            background-image: url('./珍惜时光.jpeg');
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: center;
        }
        
        .fontproperty {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!-- <div class="father">
        <div class="box"> </div>

        <div class="boxs"></div>
    </div> -->
    <!-- <div class="fatherflex">
        <div class="box"> </div>
    </div> -->
    <!-- <div class="boxsflex">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non labore blanditiis velit reprehenderit. Doloribus laborum voluptatem consequatur, suscipit iusto aliquam nisi optio, possimus illum repellendus sunt vel dicta debitis? Illo. Sint quo fuga provident
            ipsa ex? Iusto ex dolorum perferendis harum, inventore modi natus molestiae cum! Dolores, nostrum sed? Blanditiis ut et ullam maxime aliquam odio laboriosam ipsum laudantium deserunt! Explicabo beatae rem vel inventore recusandae nemo repellendus
            similique dicta optio labore vitae deserunt quam facilis delectus, unde veniam temporibus laboriosam aut nesciunt, doloremque natus quo. Dolores autem voluptatem necessitatibus. Sed, quod, odio soluta illo nesciunt recusandae odit quaerat
           iunt quaerat tenetur quia. Nemo veniam atque asperiores voluptate consequatur rerum dolor minus maxime, dignissimos ducimus nobis?
        </div> -->

    <!-- 引入一个image图片 -->
    <!-- <div class="image">

    </div> -->
    <div class="fontproperty">
        字体属性学习
    </div>

</body>

</html>